<template>
  <el-table
    v-loading="isLoading"
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    style="width: 100%">
    <el-table-column
      v-for="item in repeat"
      :key="item"
      width="50">
    </el-table-column>
    <el-table-column
      type="index"
      label="#"
      width="50">
    </el-table-column>
    <el-table-column type="expand">
      <template slot-scope="props">
        <list v-if="props.row.children" :RefEdit="RefEdit" :repeat="props.row.cat_level+1" :table-data="props.row.children"></list>
      </template>
    </el-table-column>
    <el-table-column
      property="cat_name"
      label="分类名称"
      width="120">
    </el-table-column>
    <el-table-column
      property="cat_id"
      label="分类id"
      width="120">
    </el-table-column>
    <el-table-column
      property="cat_deleted"
      label="是否有效">
      <template slot-scope="scope">
        <span>{{scope.row.cat_deleted ? "√":"×"}}</span>
      </template>
    </el-table-column>
    <el-table-column
      property="cat_level"
      label="分类级别"
      width="120">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.cat_level==0">一级</el-tag >
        <el-tag v-else-if="scope.row.cat_level==1" type="success">二级</el-tag >
        <el-tag v-else type="danger">三级</el-tag >
      </template>
    </el-table-column>
    <el-table-column
      label="分类操作">
      <template slot-scope="scope">
        <el-button type="primary" @click="editList(scope.row.cat_id,scope.row.cat_name)">编辑</el-button>
        <el-button type="danger" @click="deleteList(scope.row.cat_id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { Categories } from '@/store/categories/interface'
import Children from '@/components/categories/children.vue'
import { deleteCategories } from '@/api/categories'
import { MessageType } from 'element-ui/types/message'

@Component({
  name: 'List',
  components: { Children }
})
export default class List extends Vue {
  private isOpenChildren = false
  private isLoading=true
  created () {
    console.log(this.$store.state.categories.categories)
  }

  @Watch('$store.state.categories.categories')
  _ad () {
    this.isLoading = false
  }

  @Prop({})
  public RefEdit:any

  @Prop({ default: 0, type: Number })
  public repeat: number | undefined

  @Prop()
  public tableData?:Array<Categories>

  editList (id:number, name:string) {
    const { RefEdit: { RefEdit: { isOpen } }, render1 } = this.RefEdit
    isOpen(id, name, render1)
  }

  async deleteList (id:number) {
    const { meta } = await deleteCategories(id)
    let type:MessageType
    if (meta.status >= 200 && meta.status < 300) {
      type = 'success'
    } else {
      type = 'error'
    }
    this.RefEdit.render1()
    this.$message({
      message: meta.msg,
      type
    })
  }
}
</script>

<style lang="less" scoped>
.isOpenChildren{
  cursor: pointer;
}
</style>
